<template>
  <el-dialog
      v-model="dialogVisible"
      title=""
      width="40%"
      @close="handleClose"
      :show-close="false"
  >
    <div style="text-align: center">
      <span style="font-size: 23px;font-weight: 400">
        {{ props.content }}
      </span>
    </div>
    <div class="mt20" style="text-align: center;width: 100%;padding-left: 15%;padding-right: 15%">
      <el-input
          v-model="returnForm.returnContent"
          type="textarea"
          :rows="6"
          :placeholder="props.content"
      ></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer" style="padding-left: 15%;padding-right: 15%">
        <el-button type="primary" @click="submitReturnReason">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance} from 'vue';
import {ElMessage, FormInstance} from 'element-plus';

const props = defineProps({
  content: {
    type: String,
    default: "退回原因"
  }
})

const state = reactive({
  approveMark:"",
});
// 控制弹窗显示隐藏
const dialogVisible = ref(false);
// 退回原因表单数据
const returnForm = reactive({
  returnContent: ''
});
// 表单引用
const returnFormRef = ref<FormInstance>();

// 定义一个触发提交事件的函数，父组件可以监听该事件
const emit = defineEmits(['submit', 'close']);

// 打开弹窗的方法
const openDialog = (approveMark?:string) => {
  state.approveMark = approveMark;
  returnForm.returnContent = ''; // 打开弹窗时清空原因
  dialogVisible.value = true;
};

// 关闭弹窗的方法
const handleClose = () => {
  emit('close');
};

// 提交退回原因的方法
const submitReturnReason = () => {
  if (!returnForm.returnContent.trim()) {
    ElMessage.warning('请输入退回原因');
    return;
  }
  emit('submit', {approveMark:state.approveMark,returnContent:returnForm.returnContent} );
  dialogVisible.value = false;
};

// 暴露打开弹窗的方法给父组件使用
defineExpose({
  openDialog
});
</script>

<style scoped>
/* 可以添加自定义样式 */
/* 让 dialog 标题居中 */
:deep(.el-dialog__header) {
  margin: auto;
}

/* 让按钮容器居左 */
.dialog-footer {
  display: flex;
  justify-content: flex-start;
}
</style>